<template>
  <div>
    <a-card :bordered="false" style="position: relative; margin-bottom: 10px"
      :style="{ paddingTop: closeTip ? '20px' : '0' }">
      <div class="ant-alert ant-alert-info express-alert-info" v-if="closeTip">
        <div>
          <a style="font-weight: 600"><a-icon type="info-circle" style="padding-right:15px;" /></a>
          预警速报新增<a style="font-weight: 600;padding: 0 15px;">{{ warningVictimTotal }}</a>条疑似受害人员信息。
        </div>
        <div> <a-icon class="close" type="close" @click="closeTip = !closeTip" /> </div>
      </div>
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <div class="search-wrapper-btn">
          <a-button type="link" @click="show = !show">
            <span v-if="!show">展开<a-icon type="down" /></span>
            <span v-else>收起<a-icon type="up" /></span>
          </a-button>
        </div>
        <a-form-model v-bind="formItemLayout" @keyup.enter.native="onQuery">
          <div class="mode_item mode_item_none">
            <a-form-model-item label="预警时间" class="zdy-form-item-label">
              <a-radio-group buttonStyle="solid" v-model="form.warningTimeType">
                <a-radio-button v-for="(item, key) in options" :key="key" :value="item.value">
                  {{ item.text }}
                </a-radio-button>
              </a-radio-group>
              <span class="date-range-picker" style="margin-left: 10px" v-if="form.warningTimeType === '0'">
                <a-date-picker v-model="form.warningStartTime" placeholder="开始日期" :disabled-date="disabledStartDate"
                  format="YYYY-MM-DD HH:mm" valueFormat="YYYY-MM-DD HH:mm"
                  :show-time="{ format: 'HH:mm', defaultValue: this.$JMoment('00:00', 'HH:mm') }"
                  @openChange="handleOpenChange($event, 'start')" />
                <span class="line">-</span>
                <a-date-picker v-model="form.warningEndTime" placeholder="结束日期" :disabled-date="disabledEndDate"
                  format="YYYY-MM-DD HH:mm" valueFormat="YYYY-MM-DD HH:mm"
                  :show-time="{ format: 'HH:mm', defaultValue: this.$JMoment('23:59', 'HH:mm') }" :open="endOpen"
                  @openChange="handleOpenChange($event, 'end')" />
              </span>
            </a-form-model-item>
          </div>
          <div class="mode_item mode_item_none" v-show="show">
            <a-form-model-item label="劝阻状态" class="zdy-form-item-label">
              <a-checkbox :indeterminate="indeterminateState" :checked="checkAllState"
                @change="onCheckAllChange($event, 1)">
                全部
              </a-checkbox>
              <j-multi-select-tag v-model="form.dissuadeStatus" dictCode="dissuasion_state" type="checkbox"
                @change="onChange($event, 1)" />
            </a-form-model-item>
          </div>
          <div class="mode_item mode_item_none" v-show="show">
            <a-form-model-item label="预警等级" class="zdy-form-item-label">
              <a-checkbox :indeterminate="indeterminateGrade" :checked="checkAllGrade"
                @change="onCheckAllChange($event, 2)">
                全部
              </a-checkbox>
              <j-multi-select-tag v-model="form.warningLevel" dictCode="early_warning_level" type="checkbox"
                @change="onChange($event, 2)" />
            </a-form-model-item>
          </div>
          <div class="mode_item mode_item_none" v-show="show">
            <a-form-model-item label="处置方式" class="zdy-form-item-label">
              <a-checkbox :indeterminate="indeterminateWay" :checked="checkAllWay" @change="onCheckAllChange($event, 3)">
                全部
              </a-checkbox>
              <j-multi-select-tag v-model="form.disposalMethod" dictCode="disposal_pattern" type="checkbox"
                @change="onChange($event, 3)" />
              <span>
                <a-button type="primary" style="margin: 0 10px" @click="saveConfig"> 保存配置 </a-button>
                <a-tooltip placement="leftTop">
                  <template slot="title">
                    <span>针对预警时间、劝阻状态、预警等级、处置方式的当前选择保存配置</span>
                  </template>
                  <a-icon type="question-circle" />
                </a-tooltip>
              </span>
            </a-form-model-item>
          </div>
          <div class="mode_item" v-show="show">
            <a-form-model-item label="诈骗类型">
              <j-dict-select-tag v-model="form.fraudType" placeholder="请选择" dictCode="fraud_type" />
            </a-form-model-item>
            <a-form-model-item label="反馈验证">
              <j-dict-select-tag v-model="form.flagVeriry" placeholder="请选择" dictCode="feedback_verification" />
            </a-form-model-item>
            <a-form-model-item label="接收状态">
              <j-dict-select-tag v-model="form.receiveStatus" placeholder="请选择" dictCode="receiving_status" />
            </a-form-model-item>
            <a-form-model-item label="锁定状态">
              <j-dict-select-tag v-model="form.lockingStatus" placeholder="请选择" dictCode="locked_state" />
            </a-form-model-item>
          </div>
          <div class="mode_item" v-show="show">
            <a-form-model-item label="手机号">
              <a-input v-model="form.victimPhone" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="身份证">
              <a-input v-model="form.victimIdCard" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="涉诈域名">
              <a-input v-model="form.accessDomainName" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="预警编号">
              <a-input v-model="form.warningNumber" placeholder="请输入" />
            </a-form-model-item>
          </div>
          <div class="mode_item" v-show="show">
            <a-form-model-item label="数据来源">
              <j-dict-select-tag v-model="form.sourceFrom" placeholder="请选择" dictCode="dataSource"
                @change="onSourceChange" />
            </a-form-model-item>
            <a-form-model-item label="反馈账号">
              <a-input v-model="form.dissuadeUser" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="批次号">
              <a-input v-model="form.batchNumber" placeholder="请输入" />
            </a-form-model-item>
            <a-form-model-item label="被锁对象">
              <a-input v-model="form.lockForUserName" placeholder="请输入" />
            </a-form-model-item>
          </div>
          <div class="mode_item" v-show="show">
            <a-form-model-item label="机构匹配状态" :label-col="{ span: 7 }" :wrapper-col="{ span: 16 }">
              <j-search-select-tag v-model="form.orgMatchStatus" placeholder="请选择" :dictOptions="orgMatchStatusOptions" />
            </a-form-model-item>
            <a-form-model-item label="处置情况">
              <j-dict-select-tag v-model="form.disposal" placeholder="请选择" dictCode="handleStatus" />
            </a-form-model-item>
            <a-form-model-item label="行政区划" class="zdy-form-item-label xzqh-form-item-label" style="flex: 0 0 75%">
              <z-linkage-area :disabled="[true]" placeholder="请选择" v-model="codes" @changeLabel="getChangeLabel" />
            </a-form-model-item>
          </div>
          <div style="margin-top: 20px">
            <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
              <a-button class="Indormation-list-CX" type="primary" @click="onQuery"> 查询 </a-button>
              <a-button class="Indormation-list-CX" style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
            </a-form-model-item>
          </div>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <div>
          <a-button type="primary" @click="handleModal(1)">导入</a-button>
          <a-button @click="handleModal(2)">导出</a-button>
          <a-button @click="handleFrozens(1)" :disabled="isDisabled">人员关注</a-button>
          <a-button @click="handleFrozens(5)" :disabled="isDisabled"
            v-has="'operator_earlyWarning:receive'">批量接收</a-button>
          <a-dropdown v-model="visible" placement="bottomCenter" :overlayStyle="{ zIndex: 1 }">
            <a-menu slot="overlay">
              <a-menu-item @click="handleModal(3)" :disabled="isDisabled"
                v-has="'operator_earlyWarning:designate'">批量指派</a-menu-item>
              <a-menu-item @click="handleModal(4)" :disabled="isDisabled"
                v-has="'operator_earlyWarning:smsDissuasion'">短信劝阻</a-menu-item> <!--@click="handleFrozens(3)"-->
              <a-menu-item @click="handleFrozens(4)" :disabled="isDisabled"
                v-has="'operator_earlyWarning:shield'">批量屏蔽</a-menu-item> <!--@click="handleModal(5)"-->
              <a-menu-item @click="handleFrozens(2)" :disabled="isDisabled"
                v-has="'operator_earlyWarning:lockdata'">锁定数据</a-menu-item>
              <a-menu-item @click="handleModal(6)" :disabled="isDisabled"
                v-has="'operator_earlyWarning:appoint'">指定数据</a-menu-item>
              <a-menu-item @click="handleFrozens(6)" :disabled="isDisabled"
                v-has="'operator_earlyWarning:locationRefresh'">位置刷新</a-menu-item>
            </a-menu>
            <a-button> 更多操作 <a-icon :type="!visible ? 'down' : 'up'" /> </a-button>
          </a-dropdown>
          <span style="padding-right: 8px">
            <a-tooltip placement="rightBottom" :overlayStyle="{ minWidth: `300px`, maxWidth: `400px` }">
              <template slot="title">
                <div style="padding-bottom: 5px;">位置刷新：可通过点击位置刷新，刷新此条预警消息的最新位置和时间；刷新位置变更时“精准位置”左侧出现一个刷新标志，表示此条位置信息已刷新。
                </div>
                <div>锁定数据：指可对该条数据进行锁定，防止重复劝阻反馈工作，锁定后只能当前用户进行编辑“劝阻反馈”，其他用户不能编辑“劝阻反馈”（防止重复操作一条数据）。</div>
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </span>
        </div>
        <div style="margin-right: 88px">
          <a-button @click="handleRouter(1)" v-has="'operator_earlyWarning:dissuade'">短信配置</a-button>
          <a-button @click="handleRouter(2)" v-has="'operator_earlyWarning:strategy'">预警策略</a-button>
        </div>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="warningEvtid" :showColSettings="true" :hideColSettings="['action']"
          :showAlert="false" :showSelection="true" :loading="loading" :columns="columns" :dataSource="pageData"
          @selectedRowKey="onSelectedRow" @change="onTableChange">
          <template v-slot:colSettings>
            <a-button class="table-custom-cols"> 字段配置 </a-button>
          </template>
          <template slot="customIsVictimPhone">
            受害人手机号
            <a-tooltip placement="leftTop">
              <template slot="title">
                <span>号码格式异常时显示红色</span>
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </template>
          <template slot="customIsFirstLocation">
            入库位置
            <a-tooltip placement="leftTop">
              <template slot="title">
                <span>字段为空指“无数据”，字段为"--"指“已查询但没有数据返回”;</span>
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </template>
          <template slot="customIsFeedbackResultString">
            劝阻结果
            <a-tooltip placement="leftTop">
              <template slot="title">
                <span>针对“批量劝阻”或"劝阻反馈”的弹窗内容进行填充</span>
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </template>
          <template slot="customIsAction">
            操作
            <a-tooltip placement="leftTop">
              <template slot="title">
                <span>劝阻克隆指同一个手机号反复预警推送时，可点击“劝阻克隆”复制第一次预警时间的“劝阻结果”进行填充；
                  如果同一个手机号都没操作劝阻反馈，那么“劝阻克隆”不能点击（显示灰色），只有有过反馈情况下，才能对“劝阻结果”内容进行克隆。</span>
              </template>
              <a-icon type="question-circle" />
            </a-tooltip>
          </template>
          <template slot="disposal" slot-scope="text">
            <span v-if="text == null">--</span>
            <span v-else>{{ setTittle(text) }}</span>
          </template>
          <template slot="sourceFrom" slot-scope="text">
            {{ filterMultiDictText('dataSource', text) }}
          </template>
          <!--操作-->
          <template slot="action" slot-scope="text, record">
            <a-button @click="handleDetails(record)" type="link" style="padding:0;">详情</a-button>
            <a-divider type="vertical" />
            <a-button @click="handleFeedback(1, record)" type="link"
              :disabled="(record.noLongerDiscourage ? true : false) || record.lockingStatus === '是' && record.isMyLock == 2"
              style="padding:0;">劝阻反馈</a-button>
            <a-divider type="vertical" />
            <!-- <template v-if="record.sourceFrom == 7">
              <a-button @click="handleFeedback(2, record)"
                :disabled="record.disposal == 1 || record.disposal == 3 || record.disposal == 4" type="link"
                style="padding:0;">审核</a-button>
              <a-divider type="vertical" />
            </template> -->
            <a-dropdown>
              <a class="ant-dropdown-link"> 更多 <a-icon type="down" /> </a>
              <a-menu slot="overlay">
                <a-menu-item v-has="'item_earlyWarning:smsDissuasion'" @click="handleModal(4, record)">
                  <a-button type="link">短信劝阻</a-button>
                </a-menu-item>
                <!-- <a-menu-item v-has="'item_earlyWarning:smsDissuasion'">
                  <a-popconfirm title="确定发送劝阻短信吗?" @confirm="() => handleFrozen(record, 3)">
                    <a-button type="link">短信劝阻</a-button>
                  </a-popconfirm>
                </a-menu-item> -->
                <a-menu-item v-has="'item_earlyWarning:designate'" @click="handleModal(3, record)">
                  <a-button type="link">修改指派</a-button>
                </a-menu-item>
                <a-menu-item v-has="'item_earlyWarning:locationRefresh'">
                  <a-popconfirm title="确定位置刷新吗?" @confirm="() => handleFrozen(record, 6)">
                    <a-button type="link">位置刷新</a-button>
                  </a-popconfirm>
                </a-menu-item>
                <a-menu-item v-has="'item_earlyWarning:dissuasion'"
                  v-if="record.feedbackResultString && record.feedbackResultString.indexOf('不再劝阻') == -1">
                  <!-- <a-popconfirm title="确定恢复劝阻吗?" @confirm="() => handleFrozen(record, 4)" v-if="record.feedbackResultString && record.feedbackResultString.indexOf('不再劝阻') != -1">
                    <a-button type="link">恢复劝阻</a-button>
                  </a-popconfirm> -->
                  <a-popconfirm title="确定屏蔽劝阻吗?" @confirm="() => handleFrozen(record, 4)">
                    <a-button type="link">屏蔽劝阻</a-button>
                  </a-popconfirm>
                </a-menu-item>
                <a-menu-item v-has="'item_earlyWarning:receive'">
                  <a-popconfirm :disabled="record.receiverUserId && record.receiverUserId != 0" title="确认接收吗?"
                    @confirm="() => handleFrozen(record, 5)">
                    <a-button type="link" v-if="record.receiverUserId && record.receiverUserId != 0"
                      :disabled="true">确认接收</a-button>
                    <a-button type="link" v-else>确认接收</a-button>
                  </a-popconfirm>
                </a-menu-item>
                <a-menu-item>
                  <a-button @click="handleFeedback(2, record)"
                    :disabled="record.sourceFrom != 7 || record.disposal == 1 || record.disposal == 3 || record.disposal == 4"
                    type="link" style="padding:0;">审核</a-button>
                </a-menu-item>
                <a-menu-item>
                  <a-button type="link" :disabled="record.sourceFrom != 7" v-has="'earlyWarning:transfer'"
                    @click="transferFun(record)">移交</a-button>
                </a-menu-item>

              </a-menu>
            </a-dropdown>
          </template>
        </z-table>
      </div>
      <!--弹窗区域 -->
      <handle-modal ref="handleModalRef" @ok="modalFormOk" />
      <details-modal ref="detailsModalRef" />
      <transfer ref="transfer"></transfer>
    </a-card>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
import * as warningApi from '@/api/warning/WarningData.js'
import { isURL } from '@/utils/validate'
import { DisabledAuthFilterMixin } from '@/mixins/DisabledAuthFilterMixin'
import { colAuthFilter } from '@/utils/authFilter'
import HandleModal from './modules/HandleModal'
import DetailsModal from './modules/DetailsModal'
import transfer from './modules/transfer'
import { getDictItemsFromCache } from '@/api/api'
export default {
  components: {
    HandleModal,
    DetailsModal,
    transfer
  },
  mixins: [DisabledAuthFilterMixin],
  data() {
    return {
      MoveData: '',
      formItemLayout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 }
      },
      prodces: [{ code: '220000', label: '吉林省' }],
      endOpen: false,
      show: false,
      closeTip: false,
      loading: false,
      visible: false,
      handleModalBool: false,
      indeterminateGrade: false,
      indeterminateState: false,
      indeterminateWay: false,
      isDisabled: true,
      reloading: false,
      dictOptions: [],//getDictItemsFromCache('dissuasion_state'), //劝阻状态-字典值
      dictOptions1: [],//getDictItemsFromCache('early_warning_level'), //预警等级-字典值
      dictOptions2: [],//getDictItemsFromCache('disposal_pattern'), //处置方式-字典值
      selectKeys: [],
      codes: [],
      form: {},
      orgMatchStatusOptions: [
        { text: '全部', value: '', },
        { text: '是', value: '1', },
        { text: '否', value: '2', }
      ],
      options: [
        { value: '2', text: '今天' },
        { value: '3', text: '近三天' },
        { value: '4', text: '近七天' },
        { value: '0', text: '自定义' },
      ],
      columns: [
        {
          title: '关注',
          dataIndex: 'attentionStatus',
          width: 60,
          align: 'center',
          customRender: (text, record) => {
            if (text == 1) {
              return (
                <a-icon type="star" onClick={(event) => this.handleFrozen(record, 1)} theme="filled" style="font-size: 26px;color: #ccc;" title="点击关注" />
              )
            } else if (text == 2) {
              return (
                <a-icon type="star" onClick={(event) => this.handleFrozen(record, 1)} theme="filled" style="font-size: 26px;color: #f4eb2a;" title="点击取消关注" />
              )
            }
          }
        },
        {
          title: '预警编号',
          dataIndex: 'warningNumber',
          width: 115,
          align: 'center',
          customRender: (text, record) => {
            return (
              <div>
                {record.lockingStatus == '是' && record.isMyLock == 2 ? <a-icon type="lock" theme="filled" style="color: #999;" /> : null}
                {record.isMyLock == 1 ? <a-icon type="lock" theme="filled" style="color: #096dd9;" /> : null}
                <j-ellipsis value={text} length={12} />
              </div>
            )
          }
        },
        {
          // title: "受害人手机号码",
          columnTitle: '受害人手机号码',
          dataIndex: 'victimPhone',
          width: 110,
          align: 'center',
          slots: { title: 'customIsVictimPhone' },
          customRender: (text, record) => {
            //格式判断无效标红
            return (
              <div>
                <span style={{ color: record.status == 1 ? '#f30000' : '' }}> {text}</span>
                {record.phoneCount && record.phoneCount > 1 ? <p style="margin: 0;">（{record.phoneCount}次）</p> : null}
              </div>
            )
          },
        },
        {
          title: '预警等级',
          dataIndex: 'warningLevel',
          width: 60,
          align: 'center',
          customRender: (text) => {
            return (
              <a-tag class={
                text == '其他' ? 'ant-tag-level level_1' : text == '低危' ? 'ant-tag-level level_2' : text == '中危' ? 'ant-tag-level level_3' : text == '高危' ? 'ant-tag-level level_4' : text == '紧急' ? 'ant-tag-level level_5' : ''
              }>
                {text}
              </a-tag>
            )
          },
        },
        {
          title: '诈骗类型',
          dataIndex: 'fraudType',
          width: 100,
          align: 'center'
        },
        {
          title: '预警时间',
          dataIndex: 'warningTime',
          width: 80,
          align: 'center'
        },
        {
          title: '涉诈域名二维码',
          dataIndex: 'domainQrcode',
          width: 100,
          align: 'center',
          customRender: (text, record) => {
            if (record.accessDomainName) {
              return (
                <a-dropdown trigger={['click']} v-model={record.visible} onVisibleChange={() => this.visibleChange(record)}>
                  <a> <a-icon type="qrcode" style="color: #4d6583; font-size: 28px" /> </a>
                  <div class="custom-ewm" slot="overlay">
                    <div ref={'qrcode' + record.warningEvtid}></div>
                    {record.visible ?
                      <a-button type="primary" block style="margin-top: 10px" onClick={(event) => this.savePic(record)}> 下载二维码 </a-button>
                      : null}
                  </div>
                </a-dropdown>
              )
            } else {
              return <span>无</span>
            }
          }
        },
        {
          title: "入库位置",
          dataIndex: 'firstLocation',
          width: 140,
          align: 'center',
          // slots: { title: 'customIsFirstLocation' },
          customRender: (text, record) => {
            if (text) {
              return (
                <j-ellipsis value={text} length={15} isClick={true} nativeOnClick={() => this.gotoMap(record)} />
              )
            } else {
              return '--'
            }
          }
        },
        {
          title: '位置时间',
          dataIndex: 'firstTime',
          width: 85,
          align: 'center',
          customRender: (text) => {
            return text && text !== ' ' ? text : '--'
          }
        },
        {
          title: '劝阻状态',
          dataIndex: 'overdue',
          width: 90,
          align: 'center',
          customRender: (text, record) => {
            if (text) {
              return (
                <span>
                  <span class={'text_color_2'}> {record.dissuadeStatus}</span>
                  <span class={'text_color_3'} style={'padding-right: 0px;'}> {text} </span>
                </span>
              )
            } else if (!text && record.dissuadeStatus) {
              return (
                <span class={record.dissuadeStatus == '已劝阻' ? 'text_color_1' : record.dissuadeStatus == '未劝阻' ? 'text_color_2' : 'text_color_3'}>
                  {record.dissuadeStatus}
                </span>
              )
            } else {
              return '--'
            }
          },
        },
        //已电话联系、已电话联系、已被骗、未被骗、该用户强烈要求，不再劝阻
        {
          // title: "劝阻结果",
          columnTitle: '劝阻结果',
          dataIndex: 'feedbackResultString',
          width: 140,
          align: 'center',
          slots: { title: 'customIsFeedbackResultString' },
          customRender: (text) => {
            const dtext = text ? text.split(',') : []
            if (dtext && dtext.length > 0) {
              return dtext.map((item, index) => {
                return (
                  <a-tag class={item && item.indexOf("不再劝阻") != -1 ? 'ant-tag-cust-green' : ''} >
                    {item}
                  </a-tag>
                )
              })
            } else {
              return '--'
            }
          },
        },
        {
          title: '数据来源',
          align: 'center',
          width: 80,
          dataIndex: 'sourceFrom',
          scopedSlots: { customRender: 'sourceFrom' },
        },
        {
          title: '处置情况',
          align: 'center',
          width: 80,
          dataIndex: 'disposal',
          scopedSlots: { customRender: 'disposal' },
        },
        {
          title: '操作',
          width: 220,
          align: 'center',
          dataIndex: 'action',
          // slots: { title: 'customIsAction' },
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      qr: '',
      qrcode: '',
      pageData: {},
      isStatusShow: false
    }
  },
  computed: {
    checkAllState() {
      let bool = false
      let dissuadeStatus = Object.keys(this.form).length > 0 && this.form.dissuadeStatus ? this.form.dissuadeStatus.split(",") : []
      if ((this.dictOptions && this.dictOptions.length) === dissuadeStatus.length) {
        bool = true
      }
      return bool
    },
    checkAllGrade() {
      let bool = false
      let warningLevel = Object.keys(this.form).length > 0 && this.form.warningLevel ? this.form.warningLevel.split(",") : []
      if ((this.dictOptions1 && this.dictOptions1.length) === warningLevel.length) {
        bool = true
      }
      return bool
    },
    checkAllWay() {
      let bool = false
      let disposalMethod = Object.keys(this.form).length > 0 && this.form.disposalMethod ? this.form.disposalMethod.split(",") : []
      if ((this.dictOptions2 && this.dictOptions2.length) === disposalMethod.length) {
        bool = true
      }
      return bool
    },
    warningVictimTotal() {
      const value = this.$store.state.business.warningVictim
      return value
    }
  },
  watch: {
    'codes': {
      immediate: true,
      handler(val) {
        if (val.length === 3) {
          this.$set(this.form, 'prov', val[0])
          this.$set(this.form, 'city', val[1])
          this.$set(this.form, 'district', val[2])
        } else if (val.length === 2) {
          this.$set(this.form, 'prov', val[0])
          this.$set(this.form, 'city', val[1])
          this.$set(this.form, 'district', null)
        } else if (val.length === 1) {
          this.$set(this.form, 'prov', val[0])
          this.$set(this.form, 'city', null)
          this.$set(this.form, 'district', null)
        } else if (val.length === 0) {
          this.$set(this.form, 'prov', null)
          this.$set(this.form, 'city', null)
          this.$set(this.form, 'district', null)
        }
      }
    }
  },
  created() {
    this.$initDictOptions('dissuasion_state').then((res) => {
      if (res.success) {
        this.dictOptions = res.result;
      }
    });
    this.$initDictOptions('early_warning_level').then((res) => {
      if (res.success) {
        this.dictOptions1 = res.result;
      }
    });
    this.$initDictOptions('disposal_pattern').then((res) => {
      if (res.success) {
        this.dictOptions2 = res.result;
      }
    });
    this.columns = colAuthFilter(this.columns, 'row_earlyWarningExpress:')

  },
  async mounted() {
    this.getQueryPostionPloyConfig()
    await this.getConfig()
    this.initForm(false)
    this.onQuery()
    this.MoveData = this.$route.query.type
  },
  methods: {
    initForm(loadBool = true) {
      this.codes = []
      this.$set(this.codes, 0, this.prodces[0].code)
      this.$set(this.form, 'prov', this.prodces[0].code)
      this.$set(this.form, 'xzqh', this.prodces[0].label)
      if (loadBool) {
        this.$set(this.form, 'warningTimeType', this.options[0].value)
        this.$set(this.form, 'dissuadeStatus', this.dictOptions.map(v => { return v.value }).join(','))
        this.$set(this.form, 'warningLevel', this.dictOptions1.map(v => { return v.value }).join(','))
      }
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.form = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.initForm()
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true;
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations);
      this.refreshTable();
    },
    refreshTable() {
      let form = Object.assign({}, this.form, this.pageFilter)
      this.loading = true
      warningApi.warningList(form).then((res) => {
        this.loading = false
        if (res.success) {
          this.pageData = res.result
          this.$refs.table.onClearRowKeys()
        }
      }).catch(e => {
        this.loading = false
        this.$message.warn("请求失败！");
      })
    },
    onSourceChange(val) {
      console.log(val)
      if (val == 7) {
        this.isStatusShow = true
      } else {
        this.isStatusShow = false
      }
    },
    // 单条操作
    handleFrozen(record, type) {
      // 关注、取消关注
      if (type == 1) {
        const parameter = {
          operation: record.attentionStatus,
          userList: [{
            msisdn: record.victimPhone,
            victimId: record.victimId
          }]
        }
        this.getRequest(1, parameter)
      }
      // 短信劝阻
      if (type == 3) {
        const parameter = {
          userList: [{
            msisdn: record.victimPhone,
            victimId: record.victimId,
            sourceFlag: record.sourceFrom,
            eventTime: record.warningTime
          }]
        }
        this.getRequest(3, parameter)
      }
      // 恢复劝阻、不再劝阻
      if (type == 4) {
        let bool = record.feedbackResultString && record.feedbackResultString.indexOf('不再劝阻') != -1
        const parameter = {
          operation: bool ? 2 : 1,
          userList: [{
            msisdn: record.victimPhone,
            victimId: record.victimId,
            eventTime: record.warningTime
          }]
        }
        this.getRequest(4, parameter)
      }
      // 确认接收
      if (type == 5) {
        const parameter = [record.warningEvtid]
        this.getRequest(5, parameter)
      }
      // 刷新位置
      if (type == 6) {
        const parameter = {
          locationRefreshList: [{
            victimId: record.victimId,
            victimIp: record.victimIp,
            victimPhone: record.victimPhone
          }]
        }
        this.getRequest(6, parameter)
      }
    },
    // 批量操作
    handleFrozens(type) {
      let that = this
      let selectList = this.$refs.table.getSelectedRows()
      // 批量关注
      if (type == 1) {
        const parameter = {
          operation: 1,
          userList: selectList.map(item => {
            // 只取未关注
            if (item.attentionStatus != 2) {
              return {
                msisdn: item.victimPhone,
                victimId: item.victimId
              }
            }
          }).filter(obj => obj !== undefined)
        }
        this.$confirm({
          title: '确定关注?',
          onOk() {
            that.getRequest(1, parameter)
            that.$refs.table.onClearRowKeys() //移除选中状态
          }
        })
      }
      // 批量锁定
      if (type == 2) {
        const parameter = selectList.map(v => v.warningEvtid)
        this.$confirm({
          title: '确定锁定数据？',
          onOk() {
            that.getRequest(2, parameter)
            that.$refs.table.onClearRowKeys() //移除选中状态
          }
        })
      }
      // 批量劝阻（短信劝阻）
      if (type == 3) {
        const parameter = {
          userList: selectList.map(item => {
            return {
              msisdn: item.victimPhone,
              victimId: item.victimId,
              sourceFlag: item.sourceFrom,
              eventTime: item.warningTime
            }
          }).filter(obj => obj !== undefined)
        }
        this.$confirm({
          title: '确定发送劝阻短信？',
          onOk() {
            that.getRequest(3, parameter)
            that.$refs.table.onClearRowKeys() //移除选中状态
          }
        })
      }
      // 批量屏蔽
      if (type == 4) {
        const parameter = {
          operation: 1, //不再劝阻
          userList: selectList.map(item => {
            return {
              msisdn: item.victimPhone,
              victimId: item.victimId,
              eventTime: item.warningTime
            }
          }).filter(obj => obj !== undefined)
        }
        this.$confirm({
          title: '确定屏蔽劝阻吗？',
          onOk() {
            that.getRequest(4, parameter)
            that.$refs.table.onClearRowKeys() //移除选中状态
          }
        })
      }
      // 批量接收
      if (type == 5) {
        const parameter = selectList.map(v => v.warningEvtid)
        this.$confirm({
          title: `确认接收预警数据${parameter.length}条`,
          okText: '接收',
          onOk() {
            that.getRequest(5, parameter)
            that.$refs.table.onClearRowKeys() //移除选中状态
          }
        })
      }
      // 位置刷新
      if (type == 6) {
        const parameter = {
          locationRefreshList: selectList.map(item => {
            return {
              victimId: item.victimId,
              victimIp: item.victimIp,
              victimPhone: item.victimPhone
            }
          }).filter(obj => obj !== undefined)
        }
        this.$confirm({
          title: `确认位置刷新${parameter.locationRefreshList.length}条？`,
          onOk() {
            that.getRequest(6, parameter)
            that.$refs.table.onClearRowKeys() //移除选中状态
          }
        })
      }
    },
    // 弹窗操作
    handleModal(type, record) {
      this.handleModalBool = true
      this.$refs.handleModalRef.add()
      this.$refs.handleModalRef.type = type
      this.$refs.handleModalRef.disableSubmit = false
      let selectList = this.$refs.table.getSelectedRows()
      let getSelectKeyDatas, isBatch
      // 导出
      if (type == 2) getSelectKeyDatas = selectList.map(v => v.warningEvtid)
      // 指派
      if (type == 3) {
        let parameter = !record ? {
          victimIdList: selectList.map(v => v.victimId),
          warningEvtidList: selectList.map(v => v.warningEvtid)
        } : {
          victimIdList: [record.victimId],
          warningEvtidList: [record.warningEvtid]
        }
        getSelectKeyDatas = parameter
      }
      // 短信劝阻
      if (type == 4) {
        let parameter = !record ? {
          userList: selectList.map(item => {
            return {
              msisdn: item.victimPhone,
              victimId: item.victimId,
              sourceFlag: item.sourceFrom,
              eventTime: item.warningTime
            }
          }).filter(obj => obj !== undefined)
        } : {
          userList: [{
            msisdn: record.victimPhone,
            victimId: record.victimId,
            sourceFlag: record.sourceFrom,
            eventTime: record.warningTime
          }]
        }
        getSelectKeyDatas = parameter
        isBatch = !record ? true : false
      }
      // 批量屏蔽
      if (type == 5) {
        getSelectKeyDatas = selectList.map(item => {
          return {
            msisdn: item.victimPhone,
            victimId: item.victimId,
            sourceFlag: item.sourceFrom,
            eventTime: item.warningTime
          }
        }).filter(obj => obj !== undefined)
      }
      // 指定数据
      if (type == 6) {
        getSelectKeyDatas = selectList.map(v => v.warningEvtid)
      }
      this.$nextTick(() => {
        let handleModalRef = this.$refs.handleModalRef
        handleModalRef.$refs.realForm.getSelectKeyDatas = getSelectKeyDatas
        if (record && record.orgDeptCname) {
          this.$set(handleModalRef.$refs.realForm.model, 'orgDeptCname', record.orgDeptCname)
        }
        if (record && record.orgDeptCode) {
          this.$set(handleModalRef.$refs.realForm.model, 'orgDeptCode', record.orgDeptCode)
        }
        if (record && record.orgDeptId) {
          this.$set(handleModalRef.$refs.realForm.model, 'orgDeptId', record.orgDeptId)
        }
        if (type == 2) {
          handleModalRef.$refs.realForm.warningDataDetailQueryVO = this.form
        }
        if (type == 4) {
          handleModalRef.$refs.realForm.isBatch = isBatch
        }
      })
    },
    //移交弹窗
    transferFun(record) {
      this.$refs.transfer.show(record)
    },
    // api请求
    getRequest(type, parameter) {
      let api, message
      if (type == 1) {
        api = warningApi.follow(parameter)
        message = parameter.operation == 1 ? '关注成功' : '取消关注成功'
      } else if (type == 2) {
        api = warningApi.lockData(parameter)
      } else if (type == 3) {
        api = warningApi.dissuadeMsg(parameter)
        message = '此功能暂未开放'
      } else if (type == 4) {
        api = warningApi.dissuadeShield(parameter)
        // message = parameter.operation==2?'已恢复劝阻':'操作成功'
      } else if (type == 5) {
        api = warningApi.confirmReceipt(parameter)
        // message = '数据已接收'
      } else if (type == 6) {
        api = warningApi.batchLocationRefresh(parameter)
      }
      if (api) {
        if (type == 6) this.$loading({ text: '刷新中', translucent: true })
        api.then((res) => {
          if (res.success) {
            !message ? this.$message.success(res.message) : this.$message.success(message)
            this.refreshTable()
            if (type == 6) this.$loading().close()
          } else {
            this.$message.warn(res.message)
            if (type == 6) this.$loading().close()
          }
        }).catch(e => {
          this.$message.warn("请求失败！")
          if (type == 6) this.$loading().close()
        })
      } //else {
      // if(type===6) {
      // this.$message.warning('此功能暂未开放')
      //   this.$success({
      //     title: '您已成功刷新位置',
      //     content: (
      //       <div>刷新位置成功的在“精准位置”处有绿色标识 </div>
      //     )
      // }
      // }
    },
    // 保存配置
    saveConfig() {
      const parameter = {
        warningTimeType: this.form.warningTimeType,
        warningStartTime: this.form.warningStartTime,
        warningEndTime: this.form.warningEndTime,
        dissuadeStatus: this.form.dissuadeStatus,
        warningLevel: this.form.warningLevel,
        disposalMethod: this.form.disposalMethod
      }
      warningApi.saveQueryConfig(parameter).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
        } else {
          this.$message.warn(res.message)
        }
      }).catch(e => {
        this.$message.warn("请求失败！");
      })
    },
    // 获取保存配置
    async getConfig() {
      try {
        let res = await warningApi.getQueryConfig()
        if (res.success) {
          let data = res.result && res.result != 'null' ? res.result : {}
          let parseData = Object.keys(data).length > 0 ? JSON.parse(data) : {}
          if (data && Object.keys(parseData).length > 0) {
            this.$set(this.form, 'warningTimeType', parseData.warningTimeType)
            this.$set(this.form, 'dissuadeStatus', parseData.dissuadeStatus)
            this.$set(this.form, 'warningLevel', parseData.warningLevel)
            this.$set(this.form, 'disposalMethod', parseData.disposalMethod)
            this.$set(this.form, 'warningStartTime', parseData.warningStartTime)
            this.$set(this.form, 'warningEndTime', parseData.warningEndTime)
          } else {
            this.initForm()
          }
        } else {
          this.initForm()
        }
      } catch (err) {
        this.$message.warn("请求失败！")
      }
    },
    // 站内消息通知--状态（0：关闭；1：开启）
    getQueryPostionPloyConfig() {
      warningApi.getQueryPostionPloyConfig().then((res) => {
        if (res.success) {
          const result = res.result && Object.keys(res.result).length > 0 ? res.result : null
          const status = result && result.stationMessageStatus ? result.stationMessageStatus : 0
          if (status == 1) {
            this.closeTip = true
          } else if (status == 0) {
            this.closeTip = false
          }
        }
      })
    },
    setTittle(text) {
      return this.$filterDictTextByCache('handleStatus', text)  //现在字典中对应的文字，是全局函数
    },
    // 弹窗成功接收
    modalFormOk(type) {
      // 导出不刷新列表
      if (type == 2) return
      // 成功时，重载列表
      this.refreshTable()
      // 清空列表选中
      this.$refs.table.onClearRowKeys()
    },
    // 详情 this.$refs.detailsModalRef.title = '疑似受害人详情'
    handleDetails(record) {
      this.$refs.detailsModalRef.handle(record)
      this.$refs.detailsModalRef.title = '疑似受害人详情'
      this.$refs.detailsModalRef.disableSubmit = true
    },
    // 劝阻反馈
    handleFeedback(type, record) {
      let query = {
        victimId: record.victimId,
        msisdn: record.victimPhone,
        warningEvtid: record.warningEvtid,
        warningTime: record.warningTime,
        fraudType: record.fraudType,
        accessNumber: record.accessNumber,
        accessDomainName: record.accessDomainName,
        siteTitle: record.siteTitle,
        siteScreenshotUrl: record.siteScreenshotUrl,
        sourceFrom: record.sourceFrom,
        type: type,
        disposal: record.disposal,
        disposalComments: record.disposalComments
      }
      let url = ""
      if (type == 1) {
        url = '/earlyWarning/express/feedback' //劝阻反馈
      } else {
        url = '/earlyWarning/express/auditing' //审核
      }
      this.$router.push({
        path: url,
        query: { params: JSON.stringify(query) }
      })
    },
    //1，短信配置；2，预警策略
    handleRouter(type) {
      if (type == 1) {
        this.$router.push('/earlyWarning/express/noteTemplateList')
      } else if (type == 2) {
        this.$router.push('/earlyWarning/strategy/policyConfig/list')
      }
    },
    //最新位置跳转地图
    gotoMap(records) {
      console.log(records)
      this.$router.push({
        path: '/earlyWarning/map',
        query: {
          records: records
        }
      })
    },
    filterMultiDictText(dictCode, text) {
      if (!text) return
      let datas = getDictItemsFromCache(dictCode)
      // return this.$filterMultiDictText(datas, text)
      return this.$filterDictText(datas, text)
    },
    // 预警时间-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.form).length > 0 && this.form.warningEndTime
        ? this.$JMoment(this.form.warningEndTime) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 预警时间-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.form).length > 0 && this.form.warningStartTime
        ? this.$JMoment(this.form.warningStartTime) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 预警时间-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status === 'start' && !open) {
        this.endOpen = true
      }
      if (status === 'end') {
        this.endOpen = open
      }
    },
    //全选 type为1，劝阻状态；type为2,预警等级；type为3,处置方式
    onCheckAllChange(e, type) {
      if (type === 1) {
        Object.assign(this, { indeterminateState: false })
        this.$set(this.form, 'dissuadeStatus', e.target.checked ? this.dictOptions.map((v) => { return v.value }).join(',') : null)
      } else if (type === 2) {
        Object.assign(this, { indeterminateGrade: false })
        this.$set(this.form, 'warningLevel', e.target.checked ? this.dictOptions1.map((v) => { return v.value }).join(',') : null)
      } else if (type === 3) {
        Object.assign(this, { indeterminateWay: false })
        this.$set(this.form, 'disposalMethod', e.target.checked ? this.dictOptions2.map((v) => { return v.value }).join(',') : null)
      }
    },
    //单选 type为1，劝阻状态；type为2,预警等级；type为3,处置方式
    onChange(checkedList, type) {
      let dataLists = checkedList.split(',')
      if (type === 1) {
        this.indeterminateState = !!dataLists.length && dataLists.length < this.dictOptions.length
      } else if (type === 2) {
        this.indeterminateGrade = !!dataLists.length && dataLists.length < this.dictOptions1.length
      } else if (type === 3) {
        this.indeterminateWay = !!dataLists.length && dataLists.length < this.dictOptions2.length
      }
    },
    // 生成二维码
    crateQrcode(warningEvtid) {
      let refs = this.$refs['qrcode' + warningEvtid]
      this.qr = new QRCode(refs, {
        width: 155,
        height: 155, // 高度
        text: this.qrcode, // 二维码内容
        colorDark: "#000000",
        colorLight: "#ffffff",
        correctLevel: QRCode.CorrectLevel.H
      })
      this.qr.makeCode(this.qrcode)
    },
    // 显示隐藏二维码
    visibleChange(record) {
      if (record.visible) {
        this.qrcode = isURL(record.accessDomainName) ? record.accessDomainName : 'http://' + record.accessDomainName
        // 使用$nextTick确保数据渲染
        this.$nextTick(() => {
          this.crateQrcode(record.warningEvtid)
        })
      } else {
        this.$nextTick(() => {
          this.qr.clear() // 清除二维码
          let refs = this.$refs['qrcode' + record.warningEvtid]
          refs.innerHTML = ''
        })
      }
    },
    // 下载二维码
    savePic(record) {
      // let myCanvas = document.getElementById("qrcode").getElementsByTagName("canvas");
      let myCanvas = this.$refs['qrcode' + record.warningEvtid].getElementsByTagName("canvas")
      let a = document.createElement("a");
      a.href = myCanvas[0].toDataURL("image/png");
      a.download = "二维码";
      a.click();
    },
    // 获取行政区划中文名
    getChangeLabel(datas) {
      this.$set(this.form, 'xzqh', datas.join(''))
    }
  }
}
</script>
<style lang="less" scoped>
.express-alert-info {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
}

.date-range-picker {
  // width: 340px;
  display: inline-flex;
  align-items: center;

  .ant-calendar-picker {
    min-width: 47% !important;
  }

  .line {
    padding: 0 4px;
  }
}

.mode_item {
  display: flex;
  border-bottom: 1px #dadada dashed;

  >div {
    flex: 0 0 25%;
  }

  &>* {
    width: 100%;
    margin-bottom: 0;
    padding: 5px 0;
  }

  &.mode_item_none {
    >div {
      flex: inherit;
    }
  }

  .zdy-form-item-label {
    /deep/.ant-form-item-label {
      width: 70px;
    }

    &.xzqh-form-item-label {
      /deep/.ant-form-item-control-wrapper {
        .ant-form-item-children {
          display: -webkit-box;
        }
      }

      /deep/.area-select {
        // margin-top: 4px;
        line-height: 1.0;
      }

      /deep/.select-tag {
        width: 162px !important;
        margin-left: 10px;
        margin-top: 3px;
      }

      // /deep/.area-select .area-selected-trigger {
      //   line-height: 1.15;
      // }
      // /deep/.ant-select-lg .ant-select-selection--single{
      //   height: 34px;
      // }
      // /deep/.ant-select-lg .ant-select-selection__rendered {
      //   line-height: 34px;
      //   font-size: 14px;
      // }
    }
  }
}

.search-wrapper-btn {
  position: absolute;
  right: 0;
  top: 15px;
  z-index: 1;
}

/deep/.table-operator {
  display: flex;
  justify-content: space-between;
}

/deep/.table-custom-cols {
  top: -48px !important;
}

.custom-ewm {
  padding: 14px;
  background-color: #fff;
  border: 1px #ccc solid;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
}

/deep/.ant-dropdown-menu-item {
  text-align: center;
  border-bottom: 1px #f5f5f5 solid;

  &:last-child {
    border-bottom: 0;
  }
}

/deep/.anticon.anticon-down {
  font-size: 14px !important;
}

.table-page-content {

  /deep/.ant-table-thead>tr>th,
  /deep/.ant-table-tbody>tr>td {
    padding-left: 0;
    padding-right: 0;
  }

  /deep/.ant-table-thead>tr:first-child>th:first-child,
  /deep/.ant-table-tbody>tr>td:first-child {
    padding-left: 10px;
  }

  .text_color_1 {
    color: #02a7f0;
    padding-right: 6px;
  }

  .text_color_2 {
    color: #f59a23;
    padding-right: 6px;
  }

  .text_color_3 {
    color: #d9001b;
    padding-right: 6px;
  }

  .ant-tag-cust-green {
    background-color: #f2fee6;
    border-color: #c2fa90;
  }

  .ant-tag.ant-tag-level {
    display: block;
    font-size: 14px;
    padding-top: 3px;
    padding-bottom: 3px;
    border: 0;

    &.level_1 {
      color: #3fb674;
      background-color: #e4fff0;
    }

    &.level_2 {
      color: #56acf2;
      background-color: #dceefd;
    }

    &.level_3 {
      color: #f9b01e;
      background-color: #fef3dc;
    }

    &.level_4 {
      color: #fd586c;
      background-color: #ffe9e7;
    }

    &.level_5 {
      color: #b40aba;
      background-color: #fecdff;
    }
  }
}
</style>
